<template>
  <div class="w-full h-full grid grid-cols-[150px_1fr] bg-FileContainer">
    <!-- 会话列表 -->
    <SelectList :select-list="cache.GroupListCache || []" v-model:fileSelectData="selectGroupData">
      <template #title>
        <p class="text-xs font-medium py-2">群列表：</p>
      </template>
    </SelectList>
    <!-- 文件内容 -->
    <FileList v-model:fileList="fileList" :data="{ id: selectGroupData.id, type: ChatType.group }" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { IFileListItem, IFileSelectData } from "@/types/file";
import { useCache } from "@/store/modules/cache";
import { useUser } from "@/store/modules/user";
import FileList from "../components/FileList.vue";
import SelectList from "../components/SelectList.vue";
import { HandelFileList } from "@/utils/file";
import { ChatType } from "@/types/chat";

const cache = useCache();
const user = useUser();
const fileList = ref<IFileListItem[]>([]);
let selectGroupData = ref<IFileSelectData>({} as IFileSelectData);
let selectGroupSessionId = ref("");
async function GetMessageFileByGroup() {
  if (selectGroupSessionId.value === "") return;
  let res = await window.electronApi.getMessageFileByGroup(user.userId!, selectGroupSessionId.value);
  fileList.value = HandelFileList(res);
}

watch(
  () => selectGroupSessionId.value,
  async () => {
    await GetMessageFileByGroup();
  },
);

onMounted(() => {
  GetMessageFileByGroup();
});
</script>

<style lang="scss" scoped></style>
